const container = document.getElementById('container')
const colors = ['#e74c3c', '#8e44ad', 
                '#3498db', '#e67e22', '#2ecc71']
const SQUARES = 500

for (let i = 0;i<SQUARES;i++){
  const square = document.createElement('div')
  square.classList.add('square')

  //鼠标移入元素事件 执行setColor函数 设置颜色
  square.addEventListener('mouseover', () => setColor(square))

  //鼠标移出元素事件 执行removeColor函数 移除颜色
  square.addEventListener('mouseout', () => removeColor(square))

  container.appendChild(square)
}

//设置颜色函数
function setColor(element){
  const color = getRandomColor() //随机获取颜色
  //console.log(color);
  element.style.background = color
  //荧光效果！
  element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
}

//移除颜色函数
function removeColor(element) {
  element.style.background = '#1d1d1d'
  element.style.boxShadow = '0 0 2px #000'
}

//随机获取颜色函数  数组下标随机
function getRandomColor(){
  return colors[Math.floor(Math.random() * colors.length)]
}
